<!--
 *@开发者: 刘翔
 *@创建时间: 2025-05-23 16:34:13
 *@描述: RW区间分布
!-->
<template>
  <div class="page-title-12_5">
    <div class="page-title-12_5-header">
      <!-- <span>{{ title }}</span> -->
    </div>
    <div class="page-title-12_5-charts">
      <!-- 四个图表排在一行 -->
      <div class="charts-row">
        <!-- 医疗总费用占比图表 -->
        <div class="chart-container">
          <div class="chart-title">医疗总费用占比</div>
          <div class="chart" ref="chart1"></div>
        </div>
        <!-- 总超支结余图表 -->
        <div class="chart-container">
          <div class="chart-title">总超支结余(万元)</div>
          <div class="chart" ref="chart2"></div>
        </div>
        <!-- 病例数占比图表 -->
        <div class="chart-container">
          <div class="chart-title">病例数占比</div>
          <div class="chart" ref="chart3"></div>
        </div>
        <!-- 病组数图表 -->
        <div class="chart-container">
          <div class="chart-title">病组数</div>
          <div class="chart" ref="chart4"></div>
        </div>
      </div>
    </div>
    <div class="page-title-12_5-bottom">
      <span v-html="card1.text1"></span>
    </div>
  </div>
</template>

<script>
import formList from '../components/formList/formList';
import * as echarts from 'echarts';

export default {
  // 组件名称
  name: 'pageTile12_5',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    formList,
  },
  // 组件状态值
  data() {
    return {
      card1: {},
      title: '',
      chartInstances: [], // 保存图表实例
      data_list: {}, // 保存图表数据
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 卡片内容
    cardData(desc) {
      this.card1 = {
        text1: desc,
      };
    },

    // 初始化数据
    init(data) {
      // 设置标题
      this.title = data.title || '';

      // 保存数据
      this.data_list = data.data_list || {};

      // 设置描述内容
      this.cardData(data.desc);

      // 初始化图表
      this.$nextTick(() => {
        this.initCharts();
      });
    },

    // 初始化所有图表
    initCharts() {
      // 清除旧的图表实例
      this.chartInstances.forEach(chart => {
        chart.dispose();
      });
      this.chartInstances = [];

      // 初始化各个图表
      this.initChart('chart1', '医疗总费用占比', '%');
      this.initChart('chart2', '总超支结余(万元)', '万元');
      this.initChart('chart3', '病例数占比', '%');
      this.initChart('chart4', '病组数', '');
    },

    // 初始化单个图表
    initChart(refName, dataKey, labelFormatter = '%') {
      const chartDom = this.$refs[refName];
      if (!chartDom) return;

      const chart = echarts.init(chartDom);
      this.chartInstances.push(chart);

      const chartData = this.data_list[dataKey];
      if (!chartData) return;

      // 准备数据
      const categories = Object.keys(chartData);
      // 处理数据，保留两位小数
      const values = Object.values(chartData).map(value => {
        // 使用 Math.floor((value * 100) / 100) 保留两位小数
        return Math.floor((value || 0) * 100) / 100;
      });

      // 设置图表配置
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: function (params) {
            // 在提示框中也保留两位小数
            const value = Math.floor((params[0].data || 0) * 100) / 100;
            return `${params[0].name}: ${value}`;
          },
        },
        grid: {
          left: '3%',
          right: '15%',
          bottom: '3%',
          top: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 18, // 设置X轴文字大小为18px
            formatter: function (value) {
              // X轴标签也保留两位小数
              return Math.floor((value || 0) * 100) / 100;
            },
          },
        },
        yAxis: {
          type: 'category',
          data: categories,
          axisLabel: {
            fontSize: 18, // 设置Y轴文字大小为18px
          },
        },
        series: [
          {
            name: dataKey,
            type: 'bar',
            data: values,
            itemStyle: {
              // 统一设置：大于0的数据为蓝色，小于0的数据为红色
              color: params => {
                return params.data >= 0 ? '#1890FF' : '#FF5252'; // 大于0蓝色，小于0红色
              },
            },
            label: {
              show: true,
              position: 'right',
              formatter: function (params) {
                // 标签显示也保留两位小数
                return Math.floor((params.value || 0) * 100) / 100 + labelFormatter;
              },
              fontSize: 18, // 设置数据标签文字大小为18px
            },
          },
        ],
      };

      // 应用配置
      chart.setOption(option);
    },
  },
  // 组件销毁前清理事件监听
  beforeDestroy() {
    // 销毁图表实例
    this.chartInstances.forEach(chart => {
      chart.dispose();
    });
  },
};
</script>

<style lang="less" scoped>
.page-title-12_5 {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  .page-title-12_5-header {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    margin: 10px 0;
  }

  .page-title-12_5-charts {
    flex: 1;
    margin: 0 20px;

    // 横向排列四个图表
    .charts-row {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 700px; // 设置固定高度
    }

    .chart-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin: 0 5px;

      .chart-title {
        font-size: 18px; // 统一标题文字大小为18px
        font-weight: bold;
        text-align: center;
        margin-bottom: 5px;
      }

      .chart {
        flex: 1;
        min-height: 250px; // 确保图表有足够的高度
      }
    }
  }

  .page-title-12_5-bottom {
    margin: 0 20px;
    padding: 2%;
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    line-height: 40px;
    background: #fff2ca;
    border-radius: 16px;
    border: 1px solid #000;
    .color-tips {
      color: #ff1310;
    }
  }
}
</style>
